<template>
  <el-card class="profile-container">
    <div class="card-container">
      <div class="card-item card-board-container">
        <span class="tit">总销量</span>
        <div class="content">
          <div><span class="yue">&yen;</span>
            <span class="number" ref="volumeCount">000</span></div>
          <div class="right-icon">
            <svg-icon icon="physics" class="icon"/>
          </div>
        </div>
        <div class="bottom">
          <span>自上周以来</span>
          <svg-icon class="icon-arrow" icon="arrow-circle"/>
          <span>10%</span>
        </div>
      </div>
      <div class="card-item item-1" style="--card-bg: #d6fdd9;--icon-color: #009d73;--icon-size: 42px;">
        <div class="text">
          <span ref="companyNews">000</span>
          <svg-icon class="icon" icon="eye"/>
        </div>
        <span class="title">公司新闻</span>
      </div>
      <div class="card-item item-1" style="--card-bg: #d6f0fd;--icon-color: #2c8cf4;--icon-size: 32px;">
        <div class="text">
          <span ref="companyReport">000</span>
          <svg-icon class="icon" icon="briefcase"/>
        </div>
        <span class="title">媒体报道</span>
      </div>
      <div class="card-item item-1" style="--card-bg: #e3e4ff;--icon-color: #5f5ff6;--icon-size: 32px;">
        <div class="text">
          <span ref="companyNotice">000</span>
          <svg-icon class="icon" icon="envelope"/>
        </div>
        <span class="title">集团公告</span>
      </div>
    </div>
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="10">
        <el-card class="col-container chart-col"
                 :body-style="{padding:'10px'}"
        >
          <div class="chart" ref="chartNode"></div>
        </el-card>
      </el-col>
    </el-row>
    <el-button @click="test" type="success"></el-button>
    <el-button @click="toLogin" type="primary">Login</el-button>
  </el-card>
</template>

<script setup>
import confirm from '@/libs/confirm'
import * as echarts from 'echarts'
import {onActivated, onDeactivated, onMounted, ref} from "vue";
import {useRouter} from 'vue-router';
import {getChart} from "@/api/news";
import {options} from "@/views/profile/conf";
import {CountUp} from 'countup.js'


const test = () => {
  confirm({
    message: '确定删除码？',
    title: '温馨提示!',
    confirmBtnText: '确定',
    cancelBtnText: '取消',
    onCancel: () => {
    },
    onConfirm: () => {
    },
    onClose: () => {

    }
  }).then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
}

const companyNews = ref(null),
    companyReport = ref(null),
    companyNotice = ref(null),
    volumeCount = ref(null);
const cardItem = []

const router = useRouter()

const toLogin = () => {
  router.push({name: 'login'}).catch(() => null)
}
const chartNode = ref(null)

let myChart = null
const initData = async () => {
  const {success, data} = await getChart()
  if (!success) return
  myChart = echarts.init(chartNode.value)
  myChart.setOption(options(data))
  setTimeout(() => {
    initCards(data.map(({value}) => value))
  }, 600)
}
const countUpOptions = {
  duration: 1.5,
  separator: '',
}

const initCards = ([n1, n2, n3]) => {
  console.log(n1,n2,n3)
  if (!cardItem.length) {
    cardItem.push(
        new CountUp(companyNews.value, n1, countUpOptions),
        new CountUp(companyReport.value, n2, countUpOptions),
        new CountUp(companyNotice.value, n3, countUpOptions),
        new CountUp(volumeCount.value,79802,{
          decimal: ',',
        })
    )
  }
  cardItem.forEach(item => {
    console.log('start')
    item.start()
  })
}
let timer = null
const onResize = () => {
  if (!myChart) return
  if (timer) {
    clearTimeout(timer)
  }
  timer = setTimeout(() => {
    myChart.resize()
  }, 1000)
}
onActivated(() => {
  console.log('activated')
  if (chartNode.value){
    initData()
  }
  window.addEventListener('resize', onResize)
})
onDeactivated(() => {
  window.removeEventListener('resize', onResize)
  setTimeout(() => {
    cardItem.length && cardItem.forEach(item => {
      item.reset()
    })
  },400)
})

</script>

<style scoped lang="scss">
$width: 200px;
$height: 200px;
.profile-container {
  height: 85vh;
  overflow: auto;

  .col-container {
    height: 400px;

    &.chart-col {
      min-width: 440px;
    }

    .chart {
      height: 380px;
    }
  }


  .card-container {
    display: flex;
    gap: 25px;

    @media screen and (min-width: 1300px) {
      & {
        flex-flow: row nowrap;
      }
      .card-item {
        min-width: 250px;
      }
    }
    @media screen and (min-width: 580px) and (max-width: 1300px) {
      & {
        flex-flow: row wrap;
      }
      .card-item {
        min-width: 320px;
      }
    }

    @media screen and (max-width: 580px) {
      & {
        flex-flow: column nowrap;
      }
      .card-item {
        min-width: 220px;
      }
    }

    .card-item {
      flex: 1;
      height: 168px;
      border-radius: 3px;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      padding: 20px;
      border: 1px solid #e4e7ed;
      transition: .3s;
      color: #0e2a47;
      display: flex;
      flex-flow: column;
      background: var(--card-bg);


      &:hover {
        box-shadow: 0 0 12px rgba(0, 0, 0, .12);
      }

      .text {
        display: flex;
        font-size: 38px;
        font-weight: bold;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        margin-top: 16px;

        .icon {
          font-size: var(--icon-size);
          color: var(--icon-color);
        }
      }

      .title {
        padding-left: 22px;
        font-size: 16px;
        margin-top: 10px;
      }
    }

    .card-board-container {
      flex: 1;
      color: #fff;
      padding: 15px;
      background-image: linear-gradient(90deg, #74bcff, #1890ff);

      .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0;

        .yue {
          padding-right: 10px;
          font-size: 32px;
        }

        .number {
          font-size: 32px;
        }

        .right-icon {
          width: 60px;
          aspect-ratio: 1/1;
          background: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;

          .icon {
            color: #1890ff;
            font-size: 28px;
          }
        }
      }

      .bottom {
        font-size: 14px;
        display: flex;
        align-items: center;

        .icon-arrow {
          transform: rotate(-90deg);
          margin: 0 8px 0 12px;
        }
      }
    }
  }
}
</style>
